<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="调查问卷"></uni-navbar></view>

		<view class="detail-info" v-if="questionInfo.id">
			<view class="info-title">
				<view class="title-top">{{ questionInfo.title }}</view>
				<!-- <view class="title-btm">
					<text class="btm-name">{{ questionInfo.createByName }}</text>
					<text class="btm-time">{{ questionInfo.createTime | parseTime('{y}-{m}-{d}') }}</text>
				</view> -->
			</view>
			<view class="tip-text">{{ questionInfo.remark || `答卷数据仅用于统计分析，请放心填写。题目选项无对错之分，按照实际情况选择即可。感谢您参加此次问卷调查！` }}</view>
		</view>

		<!-- <view class="uploader-add" @click="onTts">
			<image v-if="!play" src="/static/img/icon_76.png" mode="widthFix"></image>
			<image src="/static/img/icon_77.gif" v-else mode="widthFix"></image>
		</view> -->

		<view class="form-box">
			<u-form>
				<u-form-item class="form-item" :label="item.no + '、' + item.question" label-position="top" v-for="item in content" :key="item.no">
					<block v-if="item.type == '1'">
						<u-radio-group v-model="form[item.no]" :wrap="true" @change="radioGroupChange" input-align="left">
							<u-radio @change="radioChange" v-for="sub in item.itemList" disabled :key="sub.itemCode" :name="sub.itemCode">{{ sub.itemCode + '、' + sub.itemText }}</u-radio>
						</u-radio-group>
					</block>

					<block v-else-if="item.type == '2'">
						<u-checkbox-group :wrap="true" @change="checkboxGroupChange">
							<u-checkbox v-model="sub.checked" v-for="sub in item.itemList" disabled :key="sub.itemCode" :name="sub.itemCode">{{ sub.itemCode + '、' + sub.itemText }}</u-checkbox>
						</u-checkbox-group>
					</block>

					<block v-else><u-input v-model="form[item.no]" disabled input-align="left" type="textarea" placeholder="请输入" :clearable="false" :height="160" :maxlength="-1" /></block>
				</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			typeList: {},
			typeMap: {},
			id: '',
			userList: [],
			questionInfo: {},
			form: {},
			content: [],
			play: false
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		this.loadData();
	},
	onHide() {
		this.$ttsOff();
	},
	onUnload() {
		this.$ttsOff();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				this.$logout();
			}
		},
		loadData() {
			let url = '/questionnaire/query';
			this.$request(url, {
				id: this.id,
				currentUserId: this.userId
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.questionInfo = res.data.questionnaire;
				this.userList = res.data.userList;
				try {
					this.content = JSON.parse(this.questionInfo.content);

					this.userList.forEach((item) => {
						if (this.userId == item.userId) {
							let replyContent = JSON.parse(item.replyContent) || [];
							replyContent.forEach((cont) => {
								this.form[cont.no] = cont.answer;
							});
						}
					});

					this.content.forEach((item) => {
						if (item.type == '2') {
							if (!this.form[item.no]) {
								return false;
							}
							let mulCheck = this.form[item.no].split(',');
							mulCheck.forEach((sub) => {
								item.itemList.forEach((value) => {
									if (value.itemCode == sub) {
										value.checked = true;
									}
								});
							});
						}
					});
					console.log(this.content);
				} catch (e) {
					//TODO handle the exception
				}
			});
		},
		radioChange(e) {
			console.log('radioChange', e);
		},
		radioGroupChange(e) {
			console.log('radioGroupChange', e);
		},
		checkboxGroupChange(e) {
			console.log('checkboxGroupChange', e);
		},
		onTts() {
			let text = this.questionInfo.title;
			text += ',' + this.$parseTime(this.questionInfo.createTime, '{y}-{m}-{d}');
			text += ',' + this.questionInfo.secTypeName;
			text += ',' + this.$htmlRegx(this.questionInfo.content);
			this.$tts(text, this, 500);
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.tip-text {
	font-size: 14px;
	color: #f5a623;
	line-height: 40rpx;
}

.flex-box {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	// text-indent: 1.5em;
}

.form-box {
	border-top: 20rpx solid $u-border-color;

	.form-item {
		@include mp-flex;
	}
}

.fiexd-btm {
	position: static;
	border-top: 10rpx solid $u-border-color;
	padding: 30rpx;
}
</style>
